<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D_缩放</title>
    <style>
        .outer{
            width: 300px;
            height: 300px;
            border:2px solid black;
            margin:520px;
            transform-style: preserve-3d;/*开启3D空间*/
            perspective: 500px;

            perspective-origin: 152px 152px;/*设置透视点的位置*/

        }
        .inner{
            width: 300px;
            height: 300px;
            background-color: rgba(0,191,225,0.7);
            /*transform: scaleX(1.5) scaleY(0.5);*/
            transform: scaleZ(2);/*影响元素厚度,或者说调整景深 ,效果=景深/放大倍速*/
        }

    </style>
</head>
<body>
<div class="outer">
    <div class="inner">inner1</div>
</div>

</body>
</html>